<template>
  <el-form class="drawer-multiColumn-form" ref="selectParamFormRef" :model="props">
    <el-form-item prop="value">
      <el-input :model-value="value" @input="updateValue" clearable>
        <template #prepend>
          <el-select
            :model-value="symbol"
            @change="updateSymbol"
            style="width: 102px; background-color: var(--el-fill-color-blank)"
          >
            <el-option v-for="(value1, key) in SqlKeyword" :key="key" :label="value1" :value="key" />
          </el-select>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="SelectParamForm">
import { ref } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { SqlKeyword, SymbolEnum } from "@/utils/dict";

const emit = defineEmits<{
  "update:value": [value: string];
  "update:symbol": [value: string];
}>();

const updateValue = (value: string) => {
  emit("update:value", value);
};
const updateSymbol = (symbol: string) => {
  if (symbol == SymbolEnum.IS_NULL || symbol == SymbolEnum.IS_NOT_NULL) {
    emit("update:value", "");
  }
  emit("update:symbol", symbol);
};

// defineProps(["value", "symbol", "validateRule"]);
interface Props {
  value: string;
  symbol?: SymbolEnum;
  validateRule?: FormRules;
}

const props = withDefaults(defineProps<Props>(), {
  value: "",
  symbol: SymbolEnum.EQ,
  validateRule: undefined
});

const selectParamFormRef = ref<FormInstance>();

const validateForm = () => {
  return selectParamFormRef.value?.validate();
};

defineExpose({
  validateForm
});
</script>
